<template>
  <div id="nav">
    <!-- Fixed navbar -->
    <el-affix style="z-index: 999">


    <div class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <!-- Button for smallest screens -->
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
          <a class="navbar-brand">
            <img src="/static/assets/images/logo.png" alt="Techro HTML5 template"></a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav pull-right mainNav">
            <li :class="{active:nowPath==='/index'}" v-on:click="jumpTo('Index')" ><a >主页</a></li>
            <li :class="{active:nowPath.indexOf('/about')!==-1}" v-on:click="jumpTo('about')"><a >简介</a></li>
            <li :class="{active:nowPath.indexOf('/courses')!==-1}" v-on:click="jumpToByPath('/courses')"><a >课程</a></li>
            <li v-if="loged" :class="{active:nowPath.indexOf('/discuss')!==-1}" v-on:click="jumpTo('DisscussList')"><a >讨论</a></li>
            <li v-if="loged" :class="{active:nowPath.indexOf('/homework')!==-1}" v-on:click="jumpToByPath('/homework')"><a >作业</a></li>
            <li v-if="loged" :class="{active:nowPath.indexOf('/userInfo')!==-1}" v-on:click="jumpTo('userInfo')"><a >个人信息</a></li>
            <li v-if="!loged" :class="{active:nowPath.indexOf('/sign')!==-1}" v-on:click="jumpTo('sign')"><a >登录</a></li>
            <!--            <li class="dropdown">-->
            <!--              <a  class="dropdown-toggle" data-toggle="dropdown">Pages <b class="caret"></b></a>-->
            <!--              <ul class="dropdown-menu">-->
            <!--                <li><a href="sidebar-right.html">Right Sidebar</a></li>-->
            <!--                <li><a >Dummy Link1</a></li>-->
            <!--                <li><a >Dummy Link2</a></li>-->
            <!--                <li><a >Dummy Link3</a></li>-->
            <!--              </ul>-->
            <!--            </li>-->
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
    </div>
    </el-affix>
    <!-- /.navbar -->
    <router-view/>


  </div>
  <foot></foot>
</template>

<style>
</style>

<script>
import axios from 'axios'
import $store from './store/index'
import foot from "./components/footer";
import { computed, onMounted } from "vue";
export default {
  name:'app',
  components:{foot},
  setup(){
    // 获取state.loged
    let loged = computed(()=>{ return $store.state.loged });
    function setLoged(log) {
      console.log("sert")
      $store.dispatch('setLog',log);
    }
    return{
      setLoged,
      loged
    }
  },
  created() {
    var item = JSON.parse(window.localStorage.getItem("zjxClass_student_info"));
    if (item){
      this.checkWhetherOnline(item.Token)
    }
    // this.$router.push({name:"Index"})
  },
  data(){
    return{
      nowPath:''
    }
  },
  methods:{
    jumpTo:function (name) {
      this.$router.push({name:name})
    },
    jumpToByPath:function (path) {
      this.$router.push({path:path})
    },
    checkWhetherOnline(token){
      axios.post("/api/open/CheckLogStatus",{
        Token:token
      }).then((res)=>{
        if (res.status===200){
          this.setLoged(true)
        }else {
          this.setLoged(false)
        }
      })
    }
  },
  watch:{
    $route(to,from){
      this.nowPath = to.path
    }
  }
}
</script>
